<template>
  <div class="width-100-per overflow-y-auto" style="overflow-x: hidden"  :style="{height: contentHeight + 'px !important'}">
    <a-row :gutter="8" type="flex" justify="space-around" align="middle">
      <a-col class="" :span="8">
        <div class="bg-color-white padding-10-px dynamicDD">
          <div class="width-100-per layout-side" style="border-bottom: 1px solid #0A3F89; ">
            <a class="dynamicDDT">维修动态</a>
            <div class="dynamicDDMore" @click="moreDynamic"><a style="color: white">更多+</a></div>
          </div>
          <div>
            <a-list itemLayout="horizontal" :dataSource="dynamicData">
              <a-list-item slot="renderItem" slot-scope="item, index" class="bgClick">
                <a slot="actions" class="pgClick" @click="dynamicClick(item.id)">查看>></a>
                <a-list-item-meta>
                  <a style="float: right;"></a>
                  <a slot="title">{{item.title}}</a>
                </a-list-item-meta>
                <div>{{item.content}}</div>
              </a-list-item>
            </a-list>
          </div>
        </div>
      </a-col>
      <a-col class="" :span="8">
        <div class="bg-color-white padding-10-px dynamicDD" style="height: 400px;">
          报修记录
          <div style="height: calc(100% - 270px)" class="width-100-per layout-center">
            <a-button title="我要报修" icon="form" style="height: 40px;width: 150px;" :style="{ fontSize: '16px', backgroundColor: '#1890ff'}" @click="addRepairSs">我要报修</a-button>
          </div>
        </div>
      </a-col>
      <a-col class="" :span="8">
        <div class="bg-color-white" :style="{ height:'350px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
          <a-calendar :fullscreen="false" @panelChange="onPanelChange" />
        </div>
      </a-col>
    </a-row>
    <div class="width-100-per layout-side">

    </div>

    <a-row class="bg-color-white margin-top-10-px">
      <a-col :span="8" id="mountNode1"></a-col>
      <a-col :span="8" id="mountNode2"></a-col>
      <a-col :span="8" id="mountNode3"></a-col>
    </a-row>
    <a-modal
      title="报修申请"
      width="848px"
      :visible="modalPersonnel"
      @cancel="cancelPersonnel">
      <template slot="footer">
        <a-button v-if="current === 0" key="back" icon="reload" @click="removeRepair">重置</a-button>
        <a-button v-if="current !== 0" key="prev" icon="left" style="margin-left: 8px" @click="backRepair">上一步</a-button>
        <a-button v-if="current !== 1" icon="right" type="primary" @click="nextRepair">继续</a-button>
        <a-button v-if="current === 1" key="add" icon="check" type="primary" @click="addRepairs">提交</a-button>
      </template>
      <div class="width-100-per layout-center">
        <a-steps :current="current" style="width: 500px">
          <a-step v-for="item in steps" :key="item.title" :title="item.title" />
        </a-steps>
      </div>
      <div v-if="current === 0" class="layout-left-top padding-10-px overflow-auto margin-top-10-px" style="width: 800px;height: 480px">
        <div class="layout-left-top" style="width: 350px;">
          <div class="layout-side margin-bottom-10-px margin-top-10-px">
            <div class="formSpan"><span style="color: #f5222d">*&nbsp;</span>具体楼栋</div>
            <a-input placeholder="例: 明远楼666" class="formInput" v-model="repairData.repCode"></a-input>
          </div>
          <div class="layout-side margin-bottom-10-px margin-top-10-px">
            <div class="formSpan"><span style="color: #f5222d">*&nbsp;</span>报修人员</div>
            <a-input :disabled="disabled" class="formInput" v-model="repairData.repIdStarId"></a-input>
          </div>
          <div class="layout-side margin-bottom-10-px margin-top-10-px">
            <div class="formSpan"><span style="color: #f5222d">*&nbsp;</span>报修区域</div>
            <a-select placeholder="" class="formInput"  v-model="repairData.loctionId">
              <a-select-option value="999">请选择</a-select-option>
              <a-select-option v-for="(i,index) in repLocationData" :value="i.key" :key="index">{{i.title}}</a-select-option>
            </a-select>
          </div>
          <div class="layout-side margin-bottom-10-px margin-top-10-px">
            <div class="formSpan"><span style="color: #f5222d">*&nbsp;</span>报修类别</div>
            <a-select placeholder="" class="formInput"  v-model="repairData.repTypeId">
              <a-select-option value="999">请选择</a-select-option>
              <a-select-option v-for="(i,index) in repTypeIdData" :value="i.key" :key="index">{{i.title}}</a-select-option>
            </a-select>
          </div>
        </div>
        <div class="layout-left-top" style="width: 400px">
          <div class="layout-side margin-bottom-10-px margin-top-10-px">
            <div class="formSpan"><span style="color: #f5222d">*&nbsp;</span>联系电话</div>
            <a-input class="formInput" v-model="repairData.repStarIdP"></a-input>
          </div>
          <div class="layout-side margin-bottom-10-px margin-top-10-px">
            <div class="formSpan"><span style="color: #f5222d">*&nbsp;</span>报修时间</div>
            <a-date-picker class="formInput" :value="showRepairTime"  @change="onChangeData" />
          </div>
          <div class="layout-left-top margin-bottom-10-px margin-top-10-px">
            <div class="formSpan">报修备注</div>
            <a-textarea class="" style="width: 321px" placeholder="报修备注" :rows="3" v-model="repairData.repRemarkStar"/>
          </div>
        </div>
        <div class="layout-left-top margin-bottom-10-px margin-top-10-px">
          <div class="formSpan">报修图片</div>
          <div style="width: 700px;height: 220px;overflow: auto;border: 1px solid rgb(217, 217, 217)" class="layout-left-top">
            <div class="clearfix layout-left-top padding-10-px">
              <a-upload
                accept="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                listType="picture-card"
                :fileList="fileList"
                @preview="handlePreview"
                @change="handleChange"
              >
                <div>
                  <a-icon type="plus" />
                  <div class="ant-upload-text">上传</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </div>
          </div>
        </div>
      </div>
      <div v-if="current === 1 " class="width-100-per layout-center" style="height: 500px">
        <div class="layout-side">
          <a-icon type="loading" :style="{ fontSize: '40px', color: '#52c41a' }"/>
          <span>点击提交，新增报修！！！</span>
        </div>
      </div>

  </a-modal>



</div>
</template>

<script>

  import G2 from "@antv/g2"
  import moment from 'moment'
  import {Button ,Calendar,List,Row,Col,Modal,Steps,Select,Input,DatePicker,Upload,Icon} from 'ant-design-vue'
  import {indexConfig} from "./IndexConfig";

  const steps = [
    {key:0,title:'报修信息添加'},
    {key:1,title:'报修提交'},
  ]
  const dynamicData = [
    {
      id:'1',
      title: 'Ant Design Title 1',
      content:'Ant Design Title 1',
      image:'Ant Design Title 1',
      time:'2019-12-31',
    },
    {
      id:'2',
      title: 'Ant Design Title 2',
      content:'Ant Design Title 2',
      image:'Ant Design Title 2',
      time:'2019-12-31',
    },
    {
      id:'3',
      title: 'Ant Design Title 3',
      content:'Ant Design Title 3',
      image:'Ant Design Title 3',
      time:'2019-12-31',
    },
    {
      id:'4',
      title: 'Ant Design Title 4',
      content:'Ant Design Title 4',
      image:'Ant Design Title 4',
      time:'2019-12-31',
    },
    {
      id:'5',
      title: 'Ant Design Title 5',
      content:'Ant Design Title 5',
      image:'Ant Design Title 5',
      time:'2019-12-31',
    },
    {
      id:'6',
      title: 'Ant Design Title 6',
      content:'Ant Design Title 6',
      image:'Ant Design Title 6',
      time:'2019-12-31',
    },
  ];
  export default {
    name: "main",
    components: {
      AUpload:Upload,
      ADatePicker:DatePicker,
      AInput:Input,
      ATextarea:Input.TextArea,
      ASelect:Select,
      ASelectOption:Select.Option,
      AButton:Button,
      ACalendar:Calendar,
      AList:List,
      AListItem:List.Item,
      AListItemMeta:List.Item.Meta,
      ARow:Row,
      ACol:Col,
      AModal:Modal,
      ASteps:Steps,
      AStep:Steps.Step,
      AIcon: Icon,
    },
    data(){
      return{
        staUserID:'',
        imgNum:0,
        previewImage: '',
        fileList:[],
        previewVisible:false,
        dateFormat:'YYYY-MM-DD',
        repLocationData:indexConfig.repLocationData,
        repTypeIdData:indexConfig.repTypeIdData,
        disabled:true,
        steps,
        contentHeight:0,
        dynamicData,
        modalPersonnel:false,
        current:0,
        repairData:{
          repCode:'',
          repIdStarId:'',
          repStarIdP:'',
          repImgStar:[],
          repStatTime:moment().format('YYYY-MM-DD'),
          repRemarkStar:'',
          repTypeId:"999",
          loctionId:"999"
        },
        data: [
          {
            year: '1951 年',
            sales: 38
          }, {
            year: '1952 年',
            sales: 52
          }, {
            year: '1956 年',
            sales: 61
          }, {
            year: '1957 年',
            sales: 145
          }, {
            year: '1958 年',
            sales: 48
          }, {
            year: '1959 年',
            sales: 38
          }, {
            year: '1960 年',
            sales: 38
          }, {
            year: '1962 年',
            sales: 38
          }],
        data2: [
          {
            item: '事例一',
            count: 40,
            percent: 0.4
          }, {
            item: '事例二',
            count: 21,
            percent: 0.21
          }, {
            item: '事例三',
            count: 17,
            percent: 0.17
          }, {
            item: '事例四',
            count: 13,
            percent: 0.13
          }, {
            item: '事例五',
            count: 9,
            percent: 0.09
          }],
        data3: [
          {
            year: '1991',
            value: 3
          }, {
            year: '1992',
            value: 4
          }, {
            year: '1993',
            value: 3.5
          }, {
            year: '1994',
            value: 5
          }, {
            year: '1995',
            value: 4.9
          }, {
            year: '1996',
            value: 6
          }, {
            year: '1997',
            value: 7
          }, {
            year: '1998',
            value: 9
          }, {
            year: '1999',
            value: 13
          }],
      }
    },
    computed:{
      //时间转换
      showRepairTime(){
        return moment(this.repairData.repStatTime === "" ? new Date():this.repairData.repStatTime,this.dateFormat);
      },
      //页面高度
      monitorClientHeight(){
        return this.$store.getters.clientHeight;
      }
    },
    watch:{
      monitorClientHeight:function (old,now) {
        console.log(old,now)
        now === 0?this.contentHeight = old -132 : this.contentHeight = old - 132;
      }
    },
    mounted(){
      if(this.$store.getters.clientHeight !== 0){
        this.contentHeight = this.$store.getters.clientHeight - 132;
      }
      console.log(this.$store.getters.clientHeight)
      setTimeout(() => {
        this.init()
      }, 200);
      // this.staUserID = JSON.parse(window.localStorage.getItem('msgs')).id;
      this.staUserID = JSON.parse(this.$store.getters.currentUser).id;
      this.findUser(this.staUserID);
    },
    methods:{
      // 初始查询用户名
      findUser(e){
        const that = this;
        that.$apollo.query({
          query:require('../../graphql/army/query/findUserById.gql'),
          variables:{id:e},
          fetchPolicy:'no-cache'
        }).then((data)=>{
          const findUserById = data.data.findUserById;
          that.repairData.repIdStarId = findUserById.name;
        }).catch((error)=>{
          console.log(error)
        })
      },
      //图表
      init() {
        let chart = new G2.Chart({
          container: 'mountNode1',
          forceFit: true
        });
        chart.source(this.data);
        chart.scale('sales', {
          tickInterval: 20
        });
        chart.interval().position('year*sales');
        chart.render();

        let chart2 = new G2.Chart({
          container: 'mountNode2',
          forceFit: true
        });
        chart2.source(this.data2, {
          percent: {
            formatter: function formatter(val) {
              val = val * 100 + '%';
              return val;
            }
          }
        });
        chart2.coord('theta', {
          radius: 0.75
        });
        chart2.tooltip({
          showTitle: false,
          itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
        });
        chart2.intervalStack().position('percent').color('item').label('percent', {
          formatter: function formatter(val, item) {
            return item.point.item + ': ' + val;
          }
        }).tooltip('item*percent', function (item, percent) {
          percent = percent * 100 + '%';
          return {
            name: item,
            value: percent
          };
        }).style({
          lineWidth: 1,
          stroke: '#fff'
        });
        chart2.render();

        let chart3 = new G2.Chart({
          container: 'mountNode3',
          forceFit: true
        });
        chart3.source(this.data3);
        chart3.scale('value', {
          min: 0
        });
        chart3.scale('year', {
          range: [0, 1]
        });
        chart3.tooltip({
          crosshairs: {
            type: 'line'
          }
        });
        chart3.line().position('year*value');
        chart3.point().position('year*value').size(4).shape('circle').style({
          stroke: '#fff',
          lineWidth: 1
        });
        chart3.render();
        this.cardLoading = false;
      },
      handleCancel() {
        this.previewVisible = false;
      },
      handlePreview(file) {
        this.previewImage = file.url || file.thumbUrl;
        this.previewVisible = true;
      },
      handleChange({ fileList }) {
        for(let i in fileList){
          fileList[i].status = 'done';
        }
        this.fileList = fileList;
        if(this.imgNum === 2){
          this.repairData.repImgStar.push(
            fileList[fileList.length-1].thumbUrl
          )
          this.imgNum = 0;
          return
        }
        this.imgNum++
      },
      //日期
      onChangeData(date, dateString){
        console.log(date, dateString);
        this.repairData.repStatTime = dateString;
      },
      //新增重置
      removeRepair(){
        this.repairData={
          repCode:'',
          repIdStarId:'',
          repStarIdP:'',
          repImgStar:[],
          repStatTime:moment().format('YYYY-MM-DD'),
          repRemarkStar:'',
          repTypeId:"999",
          loctionId:"999"
        }
        this.fileList=[];
        this.findUser(this.staUserID);
      },
      //上一步
      backRepair(){
        this.current--

      },
      //继续（下一步）
      nextRepair(){
        this.current++
      },
      //确定新增
      addRepairs(){
        const that = this;
        const newRepair={
          loctionId:that.repairData.loctionId,
          // materialRecordId:'',
          repCode:that.repairData.repCode,
          // repEndId:'',
          // repEndTime:'',
          // repImgEnd:[],
          repImgStar:that.repairData.repImgStar,
          // repRemarkEnd:'',
          repRemarkStar:that.repairData.repRemarkStar,
          repStarId:that.staUserID,
          repStarIdP:that.repairData.repStarIdP,
          repStatTime:that.repairData.repStatTime,
          repState:'0',
          repTypeId:that.repairData.repTypeId,
          // message:null,
        }
        that.$apollo.mutate({
          mutation:require('../../graphql/repair/mutation/saveRepair.gql'),
          variables:{entity:newRepair},
        }).then((data)=>{
          that.$message.success("保修成功，等待管理员审核！");
          that.removeRepair();
          that.current = 0;
        }).catch(error=>{
          console.log(error);
        })
        this.modalPersonnel = false;
        console.log(this.repairData)
      },
      addRepairSs(){
        this.modalPersonnel = true;
      },
      //人员弹框右上角X按钮
      cancelPersonnel(e) {
        this.modalPersonnel = false;
        this.removeRepair();
        this.current = 0;
      },
      //更多
      moreDynamic(){
        this.routerSkip("/repair");
      },
      //图表
      // init() {
      //   let chart = new G2.Chart({
      //     container: 'mountNode1',
      //     forceFit: true
      //   });
      //   chart.source(this.data);
      //   chart.scale('sales', {
      //     tickInterval: 20
      //   });
      //   chart.interval().position('year*sales');
      //   chart.render();
      //
      //   let chart2 = new G2.Chart({
      //     container: 'mountNode2',
      //     forceFit: true
      //   });
      //   chart2.source(this.data2, {
      //     percent: {
      //       formatter: function formatter(val) {
      //         val = val * 100 + '%';
      //         return val;
      //       }
      //     }
      //   });
      //   chart2.coord('theta', {
      //     radius: 0.75
      //   });
      //   chart2.tooltip({
      //     showTitle: false,
      //     itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      //   });
      //   chart2.intervalStack().position('percent').color('item').label('percent', {
      //     formatter: function formatter(val, item) {
      //       return item.point.item + ': ' + val;
      //     }
      //   }).tooltip('item*percent', function (item, percent) {
      //     percent = percent * 100 + '%';
      //     return {
      //       name: item,
      //       value: percent
      //     };
      //   }).style({
      //     lineWidth: 1,
      //     stroke: '#fff'
      //   });
      //   chart2.render();
      //
      //   let chart3 = new G2.Chart({
      //     container: 'mountNode3',
      //     forceFit: true
      //   });
      //   chart3.source(this.data3);
      //   chart3.scale('value', {
      //     min: 0
      //   });
      //   chart3.scale('year', {
      //     range: [0, 1]
      //   });
      //   chart3.tooltip({
      //     crosshairs: {
      //       type: 'line'
      //     }
      //   });
      //   chart3.line().position('year*value');
      //   chart3.point().position('year*value').size(4).shape('circle').style({
      //     stroke: '#fff',
      //     lineWidth: 1
      //   });
      //   chart3.render();
      //   this.cardLoading = false;
      // },
      //动态
      dynamicClick(e){
        console.log('校园动态')
        this.routerSkip("/repairDetails",{id:e})
      },
      onPanelChange(value, mode) {
        // console.log(value, mode);
      },
    }
    }
</script>

<style scoped>
  .bgClick:hover{
    background-color: #DDDDDD;
  }

  .bgClick:hover .pgClick{
    color: #0A3F89;
  }
  .pgClick{
    color: black;
  }
  .pgClick:hover{
    color: #0A3F89;
  }
  .dynamicDD{
    min-width: 400px;
    height: 400px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
  }
  .dynamicDDT{
    text-decoration: #0A3F89;
    font-size:24px;
    color: #0A3F89;
    border-bottom: solid 2px #0A3F89;
  }
  .dynamicDDMore{
    width: 80px;
    height: 24px;
    line-height:24px;
    background-color: #0A3F89;
    border-radius: 20px;
  }

</style>
